<template>
  <el-card>
    <el-table
      :data="data1List"
      style="width: 100%"
      :row-key="getRowKey"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="分类id"> </el-table-column>
      <el-table-column prop="name" label="分类名称" />
      <el-table-column label="操作">
        <el-button type="primary" :icon="Plus" size="small"></el-button>
        <el-button type="warning" :icon="Edit" size="small"></el-button>
        <el-button type="danger" :icon="Delete" size="small"></el-button>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XCategory",
};
</script>

<script lang="ts" setup>
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import { reqCategory1, reqCategory2, reqCategory3 } from "@/api/product/attr";
import { onMounted, ref } from "vue";
import { result } from "lodash";
const data1List = ref();
onMounted(async () => {
  const result = await reqCategory1();
  data1List.value = result.map((item) => {
    return {
      ...item,
      hasChildren: true,
      level: 1,
    };
  });
});
interface Tree {
  label: string;
  children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
  console.log(data);
};
async function load(row: any, treeNode: any, resolve: any) {
  if (row.level === 1) {
    const result = await reqCategory2(row.id);
    const data2list = result.map((item) => {
      return { ...item, hasChildren: true, level: 2 };
    });
    resolve(data2list);
  } else if (row.level === 2) {
    const result = await reqCategory3(row.id);
    const data3list = result.map((item) => {
      return { ...item, level: 3 };
    });
    resolve(data3list);
  }
}
// 设置元素key
const getRowKey = (row: any) => {
  return row.level + "" + row.id;
};
</script>

<style scoped></style>
